<template>
  <div>
    <admin-container>
      <template v-slot:content>
        <table-plugin
            :page="page"
            :config="config"
            :search-operate="searchOperate"
            :part-operate="partOperate"
            @part="partOperateActuator"
            @search="searchOperateActuator"
        />
      </template>
    </admin-container>
    <el-drawer
        :title="drawer.title"
        :visible.sync="drawer.flag"
        size="35%"
        @close="$refs['scoreUserRef'].resetFields()"
    >
      <div class="drawer-main">
        <el-form :model="scoreUser" ref="scoreUserRef" label-width="80px" :rules="rules">
          <el-form-item label="用户名">
            <el-input v-model="scoreUser.username" disabled/>
          </el-form-item>
          <el-form-item label="累积积分">
            <el-input v-model="scoreUser.accrueTotal" disabled/>
          </el-form-item>
          <el-form-item label="剩余积分">
            <el-input v-model="scoreUser.residue" disabled/>
          </el-form-item>
          <el-form-item label="变更类型" prop="changeType">
            <el-select v-model="scoreUser.changeType">
              <el-option :label="item.name" :value="item.type" v-for="(item,index) in changeTypes" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="变更值" prop="changeValue">
            <el-input v-model="scoreUser.changeValue"/>
          </el-form-item>
        </el-form>

        <div class="drawer-btn">
          <el-button type="primary" size="medium" @click="changeUserScore">确定变更</el-button>
          <el-button size="medium" @click="drawer.flag = false">取消</el-button>
        </div>
      </div>
    </el-drawer>


  </div>
</template>

<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import {post, get} from "@/utils/api";

export default {

  data() {
    let checkChangeValue2Number = (rule, value, callback) => {
      let check = /^([1-9]\d{0,4}|100000)$/
      if (!check.test(value)) {
        return callback(new Error('变更值只能输入1-100000的正整数'))
      }
      return callback();
    }
    return {
      page: {
        current: 1,
        size: 10,
        total: 0,
        records: []
      },
      scoreUser: {},
      changeTypes: [],
      rules: {
        changeType: [
          {required: true, message: '请选择变更类型', trigger: 'blur'}
        ],
        changeValue: [
          {required: true, message: '请输入变更值', trigger: 'blur'},
          {validator: checkChangeValue2Number, trigger: 'blur'}
        ]
      },
      drawer: {
        title: '',
        flag: false
      },
      config: {
        columns: [
          {
            fixed: false,
            prop: 'id',
            label: '积分编号',
            width: '200',
          },
          {
            fixed: false,
            prop: 'username',
            label: '用户名',
            width: '150',
          },
          {
            fixed: false,
            prop: 'accrueTotal',
            label: '累积积分',
            width: '100',
          },
          {
            fixed: false,
            prop: 'residue',
            label: '剩余积分',
            width: '100',
          }
        ]
      },
      partOperate: [
        {type: 'change', text: '变更积分', level: 'text', color: ''}
      ],
      searchOperate: {
        entity: {},
        condition: [
          {label: '用户名', prompt: '请输入用户名', type: 'input', width: '300px', name: 'username'}

        ]
      }


    }
  },
  methods: {

    getPage() {
      const promise = get({
        url: '/base-score/back/score/user/page',
        params: {
          current: this.page.current,
          size: this.page.size,
          username: this.searchOperate.entity.username
        }
      });

      promise.then(res => {
        if (res && res.code === 200) {
          this.page = res.data;
          return;
        }
      })

    },
    // 变更类型
    getChangeTypes() {
      const promise = get({
        url: '/base-score/back/score/user/change-type/list'
      });
      promise.then(res => {
        if (res && res.code === 200) {
          this.changeTypes = res.data;
        }
      })
    },
    changeUserScore() {
      this.$refs['scoreUserRef'].validate((valid) => {
        if (valid) {
          const promise = post({
            url: '/base-score/back/score/user/change',
            data: {
              id: this.scoreUser.id,
              changeType: this.scoreUser.changeType,
              changeValue: this.scoreUser.changeValue
            }
          });
          promise.then(res => {
            if (res && res.code === 200) {
              this.$message.success(res.message);
              this.getPage();
              this.drawer.flag = false;
              return;
            }
            this.$message.error(res.message);
          })
          return;
        }
        this.$message.error('表单数据校验失败,请检查之后重试~')
      });
    },
    partOperateActuator(index, row, operate) {
      switch (operate.type) {
        case 'change':
          this.drawer.flag = true;
          this.drawer.title = '变更用户积分'
          this.scoreUser = row;

          break;
      }


    },
    searchOperateActuator() {
      this.getPage()
    }


  },
  components: {
    AdminContainer,
    TablePlugin

  },
  created() {
    // 获取积分列表
    this.getPage();
    // 获取字典值，改变类型
    this.getChangeTypes();
  }
}
</script>

<style scoped>
.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;

}

.drawer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: 10px;
}
</style>